const {resolve} = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
const miniCssExtractPlugin = require("mini-css-extract-plugin")
const { VueLoaderPlugin } = require('vue-loader')
const cssLoader = [
  // "vue-style-loader",
  miniCssExtractPlugin.loader,
  {
    loader:"css-loader",
    options:{
      // esModule:false
    }
  },
  "postcss-loader"
]
module.exports = {
  entry:"./src/main.js",
  output:{
    filename:"js/dist.js",
    path:resolve(__dirname,"dist")
  },
  module:{
    rules:[
      {
        test:/\.vue$/,
        loader:"vue-loader"
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test:/\.css$/,
        use:[...cssLoader]
      },
      {
        test:/\.less$/,
        use:[...cssLoader,"less-loader"]
      },
      {
        test:/\.scss$/,
        use:[...cssLoader,"sass-loader"]
      },
      {
        test:/\.(jpg|png|)$/,
        loader:"url-loader",
        options:{
          limit:10*1024,
          esModule:false,
          outputPath:"img"
        }
      },
      {
        test:/\.html$/,
        loader:'html-withimg-loader'
      },
      {
        exclude:/\.(js|css|html|png|jpg|less|scss|vue)$/,
        loader:"file-loader",
        options:{
          outputPath:'medea'
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:"./public/index.html"
    }),
    new miniCssExtractPlugin({
      filename:'css/style.css'
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  devtool:"source-map"
}